<!--
 * @Author: fisher
 * @Date: 2023-12-28 15:34:32
 * @LastEditTime: 2024-01-09 16:31:53
 * @LastEditors: fisher
 * @Description: 
 * @FilePath: \front-end-template\src\modules\DataManage\transform\modules\templates.vue
-->
<template>
  <div>
    <div class="content" v-loading="tableLoading">
      <div class="templatesContent" @click="checkTemplate($event)">
        <fks-empty
          class="templateEmpty"
          v-if="!tableData.length"
          description="暂无数据"
        ></fks-empty>
        <div
          v-for="item in tableData"
          :key="item.id"
          :templateId="item.id"
          class="templateItem"
        >
          <img src="../asstes/imgs/preview.png" alt="预览图" />
          <span>{{
            item.templateName.includes(".fmw")
              ? item.templateName.slice(0, -4)
              : item.templateName
          }}</span>
        </div>
      </div>
    </div>
    <fks-pagination
      class="pagination"
      :current-page="pageNo"
      :page-sizes="[8, 16, 24, 32]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import { getTemplateList } from "../api.js";
export default {
  //import引入组件才能使用
  components: {},
  props: {
    currentWarehouseId: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      tableLoading: false,
      tableData: [],
      pageNo: 1,
      pageSize: 8,
      total: 0,
    };
  },
  // 计算属性
  computed: {},
  // 监听data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    async getData() {
      this.tableLoading = true;
      const data = {
        warehouseId: this.currentWarehouseId,
        activated: "1",
      };
      const params = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
      };
      try {
        const res = await getTemplateList(params, data);
        console.log("res", res);
        this.total = res.data.total;
        this.tableData = [...res?.data?.list];
        this.tableLoading = false;
      } catch (err) {
        throw new Error("未获取到数据:", err);
        this.tableLoading = false;
      }
    },
    // 页码方法
    handleSizeChange(val) {
      this.pageSize = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.pageNo = val;
      this.getData();
    },
    // 选中模板
    checkTemplate(val) {
      const target = val.target.attributes?.templateid?.value;
      if (target) {
        const data = this.tableData.find((item) => item.id == target);
        this.$emit("activeTemplate", data);
      }
    },
  },
  // 生命周期，创建完成时（可以访问当前this实例）
  created() {},
  // 生命周期：挂载完成时（可以访问DOM元素）
  mounted() {
    this.pageNo = 1;
    this.pageSize = 8;
    this.getData();
  },
  beforeCreate() {}, //生命周期：创建之前
  beforeMount() {}, //生命周期：挂载之前
  beforeUpdate() {}, //生命周期：更新之前
  updated() {}, //生命周期：更新之后
  beforeDestroy() {}, //生命周期：销毁之前
  destroyed() {}, //生命周期：销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发执行
};
</script>
<style lang="scss" scoped>
.content {
  width: 100%;
  height: calc(100% - 68px);
  overflow-y: scroll;
}
.templatesContent {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-content: flex-start;
  flex-wrap: wrap;
  padding: 2% 1.25%;
  box-sizing: border-box;
  position: relative;
  gap: 0 3.33%;
}
.templateEmpty {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.templateItem {
  width: 22.5%;
  height: 32.56vh;
  margin-bottom: 40px;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 0 12px 0 rgba($color: #000000, $alpha: 0.06);
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  cursor: pointer;
  transition: 0.3s ease;
  img {
    width: 77.77%;
    height: 59.5%;
    pointer-events: none;
  }
  span {
    font-size: 16px;
    color: #333;
    transition: 0.3s ease;
    pointer-events: none;
  }
}
// item选中效果
.templateItem:hover {
  border: 1px solid rgba($color: #1990ff, $alpha: 1);
  span {
    color: #1990ff;
  }
}

.pagination {
  display: flex;
  justify-content: flex-end;
  padding: 20px 0;
}
</style>
